<template>
<ContentLoader v-if="showContent" primaryColor="#e6e6e6" class="list-loader"/>
  <div v-else class="consumed-wrapper">
    <common-scroll ref="scroll"
                  :listenScroll="listenScroll"
                  @pullingDown="handleRefresh"
                  @pullingUp="handleUpdate"
                  @scroll="handleScroll"
                  class="scroll">
      <div class="scroll-container">
        <pullrefresh-content :scroll-top="scrollTop" :refresh-content="refreshContent"></pullrefresh-content>
        <Card v-on="$listeners" v-for="item of lists" :key="item.order_no" :infos="item"/>
        <load-more :isLoading="isLoading" :isMore="lists.length === Number(total) && lists.length > 0" />
        <empty :isEmpty="Number(total) === 0"/>
      </div>
    </common-scroll>
  </div>
</template>

<script>
import CommonScroll from '@/components/Scroll/scroll'
import Card from '@/views/home/components/Card'
import PullrefreshContent from '@/components/PullrefreshContent'
import Empty from '@/components/empty'
import LoadMore from '@/components/loadMore'
import { ContentLoader } from 'vue-content-loader'
import { alreadyConsumedList } from '@/api/consumed'
export default {
  name: 'consumed',
  components: {
    Card,
    CommonScroll,
    PullrefreshContent,
    Empty,
    LoadMore,
    ContentLoader
  },
  data () {
    return {
      scrollTop: 0,
      refreshContent: '下拉刷新...',
      showContent: true,
      isLoading: false,
      limitQuery: {
        page: 1,
        size: 10
      },
      total: 0,
      lists: []
    }
  },
  created () {
    this.listenScroll = true
    this.getList()
  },
  methods: {
    async handleUpdate () {
      const { lists, total } = this
      if (lists.length === Number(total) || this.isLoading) {
        this.$refs.scroll.finishPullUp()
        return
      }
      this.limitQuery.page++
      this.isLoading = true
      await this.getList()
      this.isLoading = false
      this.$refs.scroll.finishPullUp()
      this.$refs.scroll.refresh()
    },
    async handleRefresh () {
      this.limitQuery.page = 1
      this.refreshContent = '加载中...'
      this.isLoading = false
      this.lists = []
      await this.getList()
      this.$store.dispatch('home/updataOrder', true)
      this.$refs.scroll.finishPullDown()
      this.$refs.scroll.refresh()
      setTimeout(() => {
        this.refreshContent = '下拉刷新...'
      }, 500)
    },
    handleScroll (pos) {
      this.scrollTop = pos.y
    },
    async getList () {
      const { page, size } = this.limitQuery
      try {
        const res = await alreadyConsumedList({ page, size })
        const { list, total } = res.data
        this.lists = this.lists.concat(list)
        this.total = total
        this.showContent = false
      } catch (error) {
        this.showContent = false
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'
.consumed-wrapper
  .scroll
    top 340px
    padding-left 20px
    padding-right 20px
    box-sizing border-box

    .scroll-container
      min-height 100.2%
</style>
